<template>
  <div class="tabcontrol">
    <div
      v-for="(item,index) in titles"
      :key="index"
      :class="['itemcontrol',currentIndex==index?'itemcontrol-active':'itemcontrol-normal']"
    >
      <span @click="itemClick(index)" :class="{'span-bottom':currentIndex==index}">{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    itemClick(index) {
      if (this.currentIndex != index) {
        // this.currentIndex = index;
        this.$emit("onTabItemClick", index);
      }
    }
  },
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      }
    },
    currentIndex: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="scss" scoped>
.tabcontrol {
  background: #fff;
  display: flex;
  font-size: 14px;
  text-align: center;
  .itemcontrol {
    flex: 1;
    height: 40px;
    line-height: 40px;
    span {
      padding-bottom: 8px;
    }
  }
}

.itemcontrol-active {
  color: var(--color-high-text);
}
.itemcontrol-normal {
  color: var(--color-text);
}

.span-bottom {
  border-bottom: solid 2px var(--color-high-text);
}
</style>
